<template>
  <div class="Mtrade">
    <van-nav-bar :title="Movielist.nm" left-arrow @click-left="onClickLeft" />
    <div class="mini-detail" @touchend="MovieDetail(movieid)">
      <div class="poster">
        <img :src="Movielist.img" width="110" height="150" alt />
      </div>
      <div class="content">
        <div class="title">{{Movielist.nm}}</div>
        <div class="enm">{{Movielist.enm}}</div>
        <div class="sc">{{Movielist.sc}}</div>
        <div class="cat">{{Movielist.cat}}</div>
        <div class="time">{{Movielist.src}}/{{Movielist.episodeDur}}分钟</div>
        <div class="pubDesc">{{Movielist.pubDesc}}</div>
      </div>
    </div>
    <van-dropdown-menu>
      <van-dropdown-item title="全城" ref="city"></van-dropdown-item>
      <van-dropdown-item :title="title" ref="item">
        <div
          class="brand"
          :class="{active:activeIndex==index}"
          v-for="(ele,index) in CinemasData"
          :key="index"
          @touchstart="onConfirm(ele,index)"
        >
          <span class="name">{{ele.name}}</span>
          <span class="count">{{ele.count}}</span>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div
        class="cinema-item"
        v-for="(item,index) in CinemasList "
        :key="index"
        @touchend="GoCinemas(item.cinemaId)"
      >
        <div>
          <span class="title">{{item.title}}</span>
          <span class="price">
            <span class="n">{{item.price.n}}</span>
            <span class="q">{{item.price.q}}</span>
          </span>
        </div>
        <div class="location">{{item.location}}</div>
        <div class="services">
          <p :class="ele.code" v-for="(ele,i) in item.services" :key="i">{{ele.text}}</p>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  name: "Mtrade",
  data() {
    return {
      movieid: "",
      Movielist: [],
      value: 0,
      activeIndex: 0,
      title: "品牌",
      CinemasData: [],
      loading: false,
      finished: false,
      offset: 0,
      limit: 10,
      id: -1,
      CinemasList: [],
      CityId: 1
    };
  },
  created() {
    if (localStorage.getItem("historyCity")) {
      this.CityId = JSON.parse(localStorage.getItem("historyCity")).cityid;
    }
    this.movieid = this.$route.params.MovieId;
    this.GetDetail(this.movieid);
    // this.Getcinemas(this.movieid);
    this.GetCinemas();
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    Getcinemas(movieid) {
      this.axios({
        method: "get",
        url: "movie/select/cinemas",
        params: {
          movieId: movieid,
          ci: this.CityId,
          lat: 30
        }
      }).then(e => {
        console.log(e);
      });
    },
    GetDetail(movieid) {
      this.axios({
        method: "get",
        url: "movie/intro",
        params: {
          movieid: movieid
        }
      }).then(ref => {
        this.Movielist = ref.data.data.movie;
        // console.log(this.Movielist);
      });
    },
    MovieDetail(MovieId) {
      this.$router.push({ name: "Detail", params: { MovieId } });
    },
    onConfirm(ele, index) {
      this.$refs.item.toggle(false);
      this.activeIndex = index;
      this.CinemasList = [];
      this.GetMoreCinemas(ele.id);
      this.id = ele.id;
      this.title = ele.name;
      this.limit = 10;
    },
    GetCinemas() {
      this.axios({
        method: "get",
        url: "index/filterCinemas",
        params: {
          ci: this.CityId
        }
      }).then(ref => {
        let brand = ref.data.brand;
        this.CinemasData = brand.subItems;
      });
    },
    onLoad() {
      let day = new Date();
      this.limit += 10;
      this.axios({
        method: "get",
        url: "index/moreCinemas",
        params: {
          day: day.getFullYear() + "-" + day.getMonth() + "-" + day.getDay(),
          offset: this.offset,
          limit: this.limit,
          brandId: this.id,
          cityId: this.CityId
        }
      }).then(ref => {
        if (this.CinemasList == ref.data) {
          this.loading = true;
          this.finished = true;
        }
        this.CinemasList = ref.data;
        this.loading = false;
      });
    },
    GetMoreCinemas(Id = "-1") {
      let day = new Date();
      this.axios({
        method: "get",
        url: "index/moreCinemas",
        params: {
          day: day.getFullYear() + "-" + day.getMonth() + "-" + day.getDay(),
          offset: this.offset,
          limit: this.limit,
          brandId: Id,
          cityId: 20
        }
      }).then(ref => {
        this.CinemasList = ref.data;
      });
    },
    GoCinemas(cinemaId) {
      this.$router.push({ name: "Cinemas", params: { cinemaId } });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #e4393c;
  .van-icon {
    color: #eee;
  }
  .van-nav-bar__title {
    color: #eee;
  }
}
.mini-detail {
  padding: 20px 20px;
  display: flex;
  background-color: rgb(64, 38, 41);
  .poster {
    margin-right: 20px;
  }
  .content {
    line-height: 22px;
    .title {
      font-size: 20px;
      margin-top: 2px;
      font-weight: 700;
      overflow: hidden;
      color: rgb(255, 255, 255);
    }
    .enm {
      margin-top: 6px;
      opacity: 0.8;
      color: #eee;
    }
    .sc {
      font-size: 18px;
      font-weight: 700;
      color: #fc0;
      margin-top: 5px;
    }
    .cat,
    .time,
    .pubDesc {
      color: #eee;
    }
  }
}
.active {
  color: red;
}
.brand {
  position: relative;
  line-height: 0.88rem;
  height: 0.88rem;
  padding: 0 0.3rem 0 0.52rem;
  border-bottom: 0.02rem solid #e5e5e5;
  .name {
    position: absolute;
    left: 30px;
    font-size: 12px;
  }
  .count {
    position: absolute;
    right: 20px;
    color: #8f9296;
    font-size: 0.24rem;
  }
}
.cinema-item {
  background-color: #fff;
  border-bottom: 1px solid beige;
  padding: 10px 10px;
  line-height: 22px;
  .title {
    height: 0.46rem;
    line-height: 0.46rem;
    font-size: 14px;
    color: #000;
  }
  .price {
    margin-left: 20px;
    color: #e4393c;
    .n {
      font-size: 16px;
      margin-right: 2px;
    }
  }
  .location {
    color: #8f9296;
  }
  .services {
    display: flex;
    flex-wrap: wrap;
    .endorse {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(88, 157, 175);
      border: 1px solid rgb(88, 157, 175);
      margin-right: 6px;
    }
    .snack {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(255, 153, 0);
      border: 1px solid rgb(255, 153, 0);
      margin-right: 6px;
    }
    .vipTag {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(255, 153, 0);
      border: 1px solid rgb(255, 153, 0);
      margin-right: 6px;
    }
    .hallType {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(88, 157, 175);
      border: 1px solid rgb(88, 157, 175);
      margin-right: 6px;
    }
    .allowRefund {
      text-align: center;
      padding: 0 1px;
      height: 20px;
      font-size: 10px;
      color: rgb(88, 157, 175);
      border: 1px solid rgb(88, 157, 175);
      margin-right: 6px;
    }
  }
}
</style>